<template>
  <ZWDrawer ref="DrewerRef"
    ><div class="contents"
      ><div class="title"><div class="line"></div><span>基本信息</span></div>
      <el-form :form="formData"
        ><el-form-item label="创建人：">{{ tableData.created_name }}</el-form-item
        ><el-form-item label="执行人："
          ><el-tag v-for="(item, index) in tableData.exec_work_user" :key="index" style="margin-right: 8px">{{ item.name }}</el-tag></el-form-item
        ><el-form-item label="SOP周期：">{{ tableData.cycle_type == 1 ? '每日' : tableData.cycle_type == 2 ? '每周' : '每月' }}</el-form-item
        ><el-form-item label="推送要求：">{{ getText }}</el-form-item
        ><el-form-item label="质检人：" v-show="tableData.qa_enable == 1"
          ><el-tag v-for="(item, index) in tableData.qa_work_user" :key="index" style="margin-right: 8px">{{ item.name }}</el-tag></el-form-item
        ></el-form
      ><div class="space"
        ><div class="title"><div class="line"></div><span>推送内容</span></div
        ><div class="work" v-for="(item, index) in tableData.job_list" :key="index"
          ><div class="item"
            ><div class="time"
              ><img src="@/assets/smartMarketing/time.png" /><span style="margin-left: 8px; color: #ff6b00">{{
                tableData.cycle_type == 1 ? item.start_time.substr(0, 10) : tableData.cycle_type == 2 ? getWeek(item.start_time.substr(0, 10)) : item.start_time.substr(0, 7)
              }}</span></div
            ><div class="thine time"
              ><div class="time"
                ><div class="colun"></div><span class="detail" v-if="tableData.qa_enable">未达标员工（{{ item.un_check_num }}）已达标员工（{{ item.check_num }}）无上传凭证（{{ item.un_commit_num }}）</span
                ><span class="detail" v-if="!tableData.qa_enable">员工已完成（{{ item.commit_num }}）员工未完成（{{ item.un_commit_num }}）</span></div
              ><el-button @click="detail(item)">员工执行情况</el-button></div
            ></div
          ></div
        ></div
      ></div
    ></ZWDrawer
  >
  <Detaildrawer ref="DetailRef"></Detaildrawer>
</template>
<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import ZWDrawer from '@/components/ZWDrawer.vue'
  import Detaildrawer from './Detaildrawer.vue'
  import { getDetail } from '@/api/smartMarketing/marketAutomation/friendCircleSop'
  const props = defineProps(['id'])
  const DrewerRef = ref(null)
  const DetailRef = ref(null)
  const id = ref('')
  const tableData = reactive({
    id: '', //朋友圈SOP ID
    title: '', //标题
    cycle_type: '', //1 日 2 周 3 月
    corporate_times: 2, //企微朋友圈数量
    personal_times: 2, //个微朋友圈数量
    qa_enable: 1, //是否启用QA
    qa_work_user: [],
    exec_work_user: [],
    created_name: '', //创建时间,
    zjr: '',
    qa_workuser_list: '',
    job_list: [],
    status: '', //1开始 2结束
    created_at: ''
  })
  const getText = computed(() => {
    var text: any = []
    if (tableData.corporate_times) {
      text.push('企微客户朋友圈' + tableData.corporate_times + '篇')
    }
    if (tableData.personal_times) {
      text.push('个人微信朋友圈' + tableData.personal_times + '篇')
    }
    return text.join('、')
  })

  const getWeek = (date: any) => {
    date = new Date(date)
    var date2 = new Date(date.getFullYear(), 0, 1)
    var day1 = date.getDay()
    if (day1 == 0) day1 = 7
    var day2 = date2.getDay()
    if (day2 == 0) day2 = 7
    let d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000)
    //当周数大于52则为下一年的第一周
    if (Math.ceil(d / 7) + 1 > 52) {
      return date.getFullYear() + 1 + '第1周'
    }
    return date.getFullYear() + ' 第' + (Math.ceil(d / 7) + 1) + '周'
  }
  const getlist = () => {
    getDetail({ id: id.value }).then((res) => {
      Object.assign(tableData, res)
    })
  }
  const open = (row: any) => {
    getlist()
    DrewerRef.value.drawer = true
    DrewerRef.value.isShow = false
    DrewerRef.value.width = 630
    DrewerRef.value.title = `【${row.title}】完成情况`
  }
  const detail = (data: any) => {
    DetailRef.value.id = data.id
    DetailRef.value.qa_enable = tableData.qa_enable
    DetailRef.value.open(tableData.title)
  }
  defineExpose({ open, id })
</script>
<style lang="scss" scoped>
  .contents {
    padding: 20px 20px 10px 20px;

    .el-form-item {
      margin-bottom: 0;
    }
    .title {
      display: flex;
      margin-bottom: 16px;
      .line {
        width: 3px;
        height: 14px;
        margin-right: 6px;
        background: #ff6b00;
      }
    }
    .space {
      border-top: 1px solid #eaeaea;
      margin-top: 20px;
      padding-top: 20px;
    }
    .item {
      display: flex;
      flex-direction: column;
      .time {
        display: flex;
        align-items: center;
      }
      .thine {
        justify-content: space-between;
        .detail {
          margin-left: 14px;
          color: #696969;
        }
        .colun {
          display: inline-block;
          height: 62px;
          width: 0;
          border: 1px dashed #eaeaea;
          margin-left: 8px;
        }
      }
    }
  }
</style>
